<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>

    <title></title>
    <!-- 引入bootstrap样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

    <link rel="stylesheet" href="../css/section.css">
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap-table.min.js -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/vue-resource.js" charset="utf-8"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


</head>
<body>
<div id="appSjl">
    <table class="table table-bordered table-striped">
        <tr>
            <div id="app">
                <button type="button" class="btn btn-info" @click="show=!show">添加</button>
                <a href="sections.html" class="btn btn-success">刷新
                </a>
                <jspang :show="show" @closeparent="cl"></jspang>
            </div>
        </tr>
        <tr>
            <th>科室ID</th>
            <th>科室名称</th>
            <th>科室备注</th>
            <th>操作</th>
        </tr>
        <tr v-for="section in sectionList">
            <td>{{section.sectionsId}}</td>
            <td>{{section.sectionsName}}</td>
            <td>{{section.sectionsRemark}}</td>
            <td>
                <button type="button" class="btn btn-info btn-xs" @click="getRowId(section.sectionsId);show=!show">编辑
                </button>
                <button type="button" class="btn btn-danger btn-xs" @click="deleteSjl(section.sectionsId)">删除</button>
            </td>
        </tr>
    </table>
    <div class="center">
        <el-pagination :current-page="current" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :page-sizes="[10,20,30]" :page-size="pageSize" :pager-count="11"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="pageCount">
        </el-pagination>
    </div>
</div>
<template id="dialog">
    <div v-if="show" class="mask" width="400px">
        <div class="content">
            <button @click="close" id="close">x</button>
            <div>
                <form method="post" onsubmit="return false">
                    <h3>添加科室信息</h3>
                    <div class="form-group">
                        <label for="inputEmail30" class="col-sm-2 control-label">科室名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="rowtemplate.sectionsName" id="inputEmail30"
                                   placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">科室备注</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" v-model="rowtemplate.sectionsRemark"
                                   id="inputEmail3" placeholder="Email">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-info" @click="addSjl">提交</button>
                    <button type="reset" class="btn btn-danger">重置</button>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
    // dialog组件
    var jspang = {
        props: ["show"],
        template: `#dialog`,
        data: function () {
            return {
                rowtemplate: {
                    sectionsId: 0,
                    sectionsName: "",
                    sectionsRemark: ""
                }
            }
        },
        methods: {
            addSjl: function () {
                if (sec.sectionsId == 0) {
                    //设置当前新增行的Id
                    ajax({
                        url: "/sections/createSectionsSjl", //请求地址
                        data: this.rowtemplate,
                        dataType: "jsonp",
                        success: function (result) { //服务器返回的结果
                            if (result.code == 0) {
                                alert(result.msg);
                                window.location.href = "";
                            } else {
                                alert(result.msg);
                            }
                        }
                    })
                } else {
                    ajax({
                        url: "/sections/updateSectionsSjl", //请求地址
                        data: {
                            sectionsId: sec.sectionsId,
                            sectionsName: this.rowtemplate.sectionsName,
                            sectionsRemark: this.rowtemplate.sectionsRemark
                        },
                        dataType: "jsonp",
                        success: function (result) { //服务器返回的结果
                            if (result.code == 0) {
                                alert(result.msg);
                                window.location.href = "";
                            } else {
                                alert(result.msg);
                            }
                        }
                    })
                }
            },
            close() {
                this.$emit("closeparent");
            }
        }
    }
    var sec = new Vue({
        el: '#appSjl',
        data: {
            sectionList: [],
            show: false,
            pageSize: 10,
            pageCount: 100,
            current: 0,
            sectionsId: 0
        },
        mounted: function () { //钩子函数
            this.getSectionsAllSjl();
        },
        components: {
            jspang
        },
        methods: {
            getSectionsAllSjl: function () {
                ajax({
                    url: "/sections/selectSectionsSjl", //请求地址
                    dataType: "jsonp",
                    data: { //需要携带的参数
                        current: this.current,
                        size: this.pageSize
                    },
                    success: function (result) { //服务器返回的结果
                        console.log(result.records);
                        sec.sectionList = result.records; //将结果赋值给 msg
                        sec.pageCount = result.total;
                        sec.current = result.current;
                    }
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getSectionsAllSjl();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.getSectionsAllSjl();
            },
            getRowId(sectionsId) {
                if (sectionsId < 1) {
                    return sectionsId = 0;
                } else {
                    return this.sectionsId = sectionsId;
                }


            },
            deleteSjl: function (sectionsId) {
                var r = confirm('您确认删除吗？');
                if (r == true) {
                    ajax({
                        type: "post",
                        url: "/sections/deleteSectionsSjl", //请求地址
                        dataType: "jsonp",
                        data: { //需要携带的参数
                            sectionsId: parseInt(sectionsId)
                        },
                        success: function (result) { //服务器返回的结果
                            if (result.code == 0) {
                                alert(result.msg);
                                window.location.href = "";
                            } else {
                                alert(result.msg);

                            }
                        }
                    })
                }

            },
            cl() {
                this.show = false;
            }
        }
    })

</script>
</body>
</html>
